<template>
  <div>
    <div class="box">
      <div class="sp1" @click="router.go(-1)">
        <van-icon name="arrow-left" size="1.5rem" />
      </div>
      <span style="font-size: 1.2rem; margin-left: 7rem">通知</span>
    </div>
   
      <p style="text-align: center; margin-top: 1rem; font-size: 1.2rem;font-weight: 700" v-if="list.length == 0">暂无任何通知</p>
    
 <div v-if="list.filter(item=> dayjs(Date.now()).format('YYYY-MM-DD') == dayjs(item.time).format('YYYY-MM-DD') ).length > 0">
     <h4 style="margin-left: 1.7rem; margin-top: 0.5rem">今天</h4>
    <div class="box1" v-for="i in list.filter(item=> dayjs(Date.now()).format('YYYY-MM-DD') == dayjs(item.time).format('YYYY-MM-DD') )" :key="i">
      <div class="box2">
        <div class="box3">
          <img
            src="/通知.png"
            alt=""
            width="40%"
            height="40%" b
            style="position: relative; top: 1rem; left: 1.2rem"
          />
        </div>
        <div class="box4">
          <p>
            <span style="font-size: 17px; font-weight: 600">{{i.title}}</span>
            <span style="float: right; margin-right: 2rem">{{ dayjs(i.time).format("YYYY-MM-DD") }}</span>
          </p>
          <p style="margin-top: 1rem; color: rgb(129, 136, 152)">
            {{i.content}}
          </p>
        </div>
      </div>
    </div>
 </div>
  <div v-if="list.filter(item=> dayjs(Date.now()).format('YYYY-MM-DD') != dayjs(item.time).format('YYYY-MM-DD') ).length > 0">
       <h4 style="margin-left: 1.7rem; margin-top: 0.5rem">之前</h4>
        <div class="box1" v-for="i in list.filter(item=> dayjs(Date.now()).format('YYYY-MM-DD') != dayjs(item.time).format('YYYY-MM-DD') )" :key="i">
      <div class="box2">
        <div class="box3">
          <img
            src="/通知.png"
            alt=""
            width="40%"
            height="40%"
            style="position: relative; top: 1rem; left: 1.2rem"
          />
        </div>
        <div class="box4">
          <p>
            <span style="font-size: 17px; font-weight: 600">{{i.title}}</span>
            <span style="float: right; margin-right: 2rem">{{ dayjs(i.time).format("YYYY-MM-DD") }}</span>
          </p>
          <p style="margin-top: 1rem; color: rgb(129, 136, 152)">
            {{i.content}}
          </p>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import axios from "axios"
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
import { onMounted,ref,reactive} from "vue"
import {useRouter} from "vue-router"
const _id = localStorage.getItem("userId")
const router = useRouter()
const list = reactive([])
const gettz = async()=>{
  await axios.get("http://localhost:3000/jsb/gettz").then(res=>{
    console.log(res.data)
    console.log(_id);
    let arr = res.data.list.filter(item=>item.pid == _id || !item.pid)
    list.push(...arr)
    console.log(dayjs(Date.now()).format("YYYY-MM-DD"));
    
  })
}
onMounted(()=>{
  gettz()
})
</script>

<style lang="scss" scoped>
.box {
  width: 90vw;
  margin: 2rem auto;
  align-items: center;
  display: flex;
  .sp1 {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    text-align: center;
    border: 1px solid rgb(212, 212, 212);
    line-height: 3.3rem;
  }
}
.box1 {
  width: 90vw;
  margin: 0 auto;
}
.box2 {
  width: 90vw;
  height: 8rem;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  .box3 {
    width: 18%;
    height: 45%;
    border-radius: 50%;
    background-color: rgb(255, 248, 230);
  }
  .box4 {
    width: 77%;
    height: 90%;
    border-bottom: 2px solid rgb(129, 136, 152);
  }
}


.box5 {
  width: 90vw;
  height: 8rem;
  margin: 1rem auto;
  display: flex;
  justify-content: space-between;
  .box6 {
    width: 18%;
    height: 45%;
    border-radius: 50%;
    background-color: rgb(255, 248, 230);
  }
  .box7 {
    width: 77%;
    height: 70%;
    border-bottom: 2px solid rgb(129, 136, 152);
  }
}
</style>